import React, { Component } from 'react';
import AutoComplete from './components/AutoComplete'
import './App.css'
class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      list: [],
      select: ''
    }
  }
  handleInputValue (value) {
    const list = this.state.list
    list.push(value)
    this.setState({
      list
    })
  }
  handelSelectValue (value) {
    this.setState({
      select: value
    })
  }
  render() {
    return (
      <div className="App">
        <AutoComplete
          getSelect={this.handelSelectValue.bind(this)}
          getInput={this.handleInputValue.bind(this)}>
        <div className='Tips'>
          <ul>
            {this.state.list.map((list, index) => 
              <li
                onClick={this.handelSelectValue.bind(this, list)}
                key={index}>
                {list}
              </li>
            )}
          </ul>
        </div>
        </AutoComplete>
          { this.state.select && 
            <p className='select_value'>您选中的值是： {this.state.select}</p>
          }
      </div>
    );
  }
}

export default App;
